<template>
  <div>
    <el-dialog
      title="新增心愿"
      width="650px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"

    >
      <div class="dialogBody">
        <el-form
          :model="params"
          :rules="rules"
          ref="ruleForm"
          label-position="right"
          label-width="140px"
          size="small"
        >
          <el-form-item label="心愿标题：" prop="title">
            <el-input v-model="params.title" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="心愿类型：" prop="type">
            <el-select v-model="params.type" placeholder="请选择">
              <el-option label="普通服务" value="1"> </el-option>
              <el-option label="助老服务" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="心愿描述：">
            <el-input
              v-model="params.describe"
              type="textarea"
              :autosize="{ minRows: 3 }"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="心愿价值(积分)：" prop="score">
            <el-input
              oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
              v-model="params.score"
              @blur="params.score = $event.target.value"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="期望完成时间：">
            <el-date-picker
              v-model="params.expected_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="手机号：" prop="phone">
            <el-input
              oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
              v-model="params.phone"
              @blur="params.phone = $event.target.value"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addWish } from "@/api/wish.js";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      params: {
        title: "",
        type: "",
        score: "",
        describe: "",
        expected_time: "",
        phone: "",
      },
      rules: {
        title: [{ required: true, message: "请输入心愿标题", trigger: "blur" }],
        type: [
          { required: true, message: "请选择心愿类型", trigger: "change" },
        ],
        score: [{ required: true, message: "请输入心愿价值", trigger: "blur" }],

        // expected_time: [
        //   { required: true, message: "请选择营业时间", trigger: "change" },
        // ],

        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //新增
          addWish(this.params).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.$emit("handleClose", true);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  /deep/.el-input__inner {
    width: 400px;
  }
  /deep/.el-textarea {
    width: 400px;
  }
  //   /deep/.flexItem {
  //     display: flex;
  //     .el-form-item {
  //       flex: 1;
  //     }
  //     .el-input__inner {
  //       width: 260px;
  //     }
  //     .el-range-editor.el-input__inner {
  //       width: 290px;
  //     }
  //   }
}
</style>
